<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                    </div>
                    <div>
                        <div style="text-align: center">
                            <el-upload
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                :on-error="handleError"
                                :headers="headers"
                                :action="updateAvatarApi"
                                class="avatar-uploader"
                            >
                                <img :src="user.icon" title="点击上传头像" class="avatar" />
                            </el-upload>
                        </div>
                        <ul class="user-info">
                            <li>
                                <svg-icon icon-class="user1" />用户名称
                                <div class="user-right">{{ user.username }}</div>
                            </li>
                            <li>
                                <svg-icon icon-class="phone" />手机号码
                                <div class="user-right">{{ user.phone }}</div>
                            </li>
                            <li>
                                <svg-icon icon-class="email" />用户邮箱
                                <div class="user-right">{{ user.email }}</div>
                            </li>
                            <li>
                                <svg-icon icon-class="email" />性别
                                <div class="user-right">{{ user.sex === 1? '男':'女' }}</div>
                            </li>
                            <li>
                                <svg-icon icon-class="dept" />所属部门
                                <div class="user-right">{{ user.dept }} / {{ user.job }}</div>
                            </li>
                            <li>
                                <svg-icon icon-class="date" />创建日期
                                <div class="user-right">{{ user.createTime}}</div>
                            </li>
                            <li>
                                <svg-icon icon-class="anq" />安全设置
                                <div class="user-right">
                                    <a @click="$refs.pass.dialog = true">修改密码</a>
                                    <a @click="$refs.email.dialog = true">修改邮箱</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>操作日志</span>
                        <div style="display:inline-block;float: right;cursor: pointer" @click="refresh">
                            <i :class="ico" />
                        </div>
                    </div>
                    <div>
                        <el-table v-loading="tableLoading" :data="tableData" size="small" style="width: 100%;">
                            <el-table-column prop="description" label="行为" width="400px"/>
                            <el-table-column prop="uri" label="uri" show-overflow-tooltip=""/>
                            <el-table-column prop="ip" label="IP" width="150px"/>
                            <el-table-column label="返回值" width="60px">
                                <template slot-scope="scope">
                                    <el-tag size="small">{{ scope.row.code }}</el-tag>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源"/> -->
                            <!-- <el-table-column prop="browser" label="浏览器" /> -->
                            <el-table-column prop="spendTime" label="请求耗时" align="center" width="100px">
                                <template slot-scope="scope">
                                    <el-tag size="small" v-if="scope.row.spendTime <= 300">{{ scope.row.spendTime }}ms</el-tag>
                                    <el-tag size="small" v-else-if="scope.row.spendTime <= 1000" type="warning" >{{ scope.row.spendTime }}ms</el-tag>
                                    <el-tag size="small" v-else type="danger">{{ scope.row.spendTime }}ms</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="startTime" label="创建日期" width="180px"></el-table-column>
                        </el-table>
                            <!--分页组件-->
                        <el-pagination 
                            @size-change="handleSizeChange" 
                            @current-change="handleCurrentChange" 
                            :current-page="currentPage" 
                            :page-sizes="[10, 20, 30, 40]" 
                            :page-size="pageSize" 
                            layout="total, sizes, prev, pager, next, jumper" 
                            :total="total">
                        </el-pagination>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <update-email ref="email" :email="user.email"></update-email>
        <update-pass  ref="pass"></update-pass>
    </div>
</template>

<script>
import { mapGetters }   from "vuex";
import { regEmail }     from "@/utils/index";
import { getToken }     from "@/utils/auth";
import { queryByUsernameLog }    from "@/api/log";
import store            from "@/store";
import pageHelp         from "@/mixins/pageHelp";
import Avatar           from "@/assets/avatar/avatar.png";
import UpdatePass       from "@/views/system/center/dialog/UpdatePass";
import UpdateEmail      from "@/views/system/center/dialog/UpdateEmail";
export default {
    name: "Center",
    mixins: [pageHelp],
    components: {
        "update-pass": UpdatePass,
        "update-email": UpdateEmail
    },
    data() {
        return {
            tableLoading:false,
            tableData:[],
            Avatar: Avatar,
            ico: "el-icon-refresh",
            headers: {
                Authorization: "Bearer " + getToken()
            }
        };
    },
    computed: {
        ...mapGetters(["user", "updateAvatarApi", "baseApi"])
    },
    created() {
        // this.$nextTick(() => {
        //     this.init();
        // });
        this.getData()
        store.dispatch("user/GetInfo").then(() => {});
    },
    methods: {
        getData(){
            this.apiQueryByUsernameLog()
        },
        formatEmail(mail) {
            return regEmail(mail);
        },
        // beforeInit() {
        //     this.url = "api/logs/user";
        //     const sort = "id,desc";
        //     this.params = { page: this.page, size: this.size, sort: sort };
        //     return true;
        // },
        handleSuccess(response, file, fileList) {
            this.$notify({
                title: "头像修改成功",
                type: "success",
                duration: 2500
            });
            store.dispatch("user/GetInfo").then(() => {});
        },
        // 监听上传失败
        handleError(e, file, fileList) {
            const msg = JSON.parse(e.message);
            this.$notify({
                title: msg.message,
                type: "error",
                duration: 2500
            });
        },
        refresh() {
            this.ico = "el-icon-loading";
            this.getData()
            setTimeout(() => {
                this.ico = "el-icon-refresh";
            }, 300);
        },
        pageQuery(){
            this.apiQueryByUsernameLog()
        },
        //==========>请求api接口<==========//
        apiQueryByUsernameLog(){
            //管理员查询接口
            this.tableLoading =true
            let params = {
                pageNum : this.pageNum,
                pageSize: this.pageSize,
                username: this.user.username
            }
            queryByUsernameLog(params).then(res=>{
                if(res.code ===200){
                    this.tableData    = res.data.list
                    this.total        = res.data.total
                    this.tableLoading = false
                }
            }).catch((err)=>{
                this.tableLoading = false
            })
        },
        //==========>请求api接口<==========//
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.avatar-uploader-icon {
    font-size: 28px;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 50%;
}
.user-info {
    padding-left: 0px;
    list-style: none;
    li {
        border-bottom: 1px solid #f0f3f4;
        border-top: 1px solid #f0f3f4;
        padding: 11px 0px;
        font-size: 13px;
    }
    .user-right {
        float: right;

        a {
            color: #317ef3;
        }
    }
}
</style>
